<template>
  <div class="divBox">
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-button size="small" type="primary" @click="onAdd">添加店铺类型</el-button>
            </div>
            <el-table
                v-loading="listLoading"
                :data="tableData.data"
                style="width: 100%"
                size="small"
                highlight-current-row
                class="switchTable"
            >
                <el-table-column prop="mer_type_id" label="ID" min-width="60" />
                <el-table-column prop="type_name" label="店铺类型名称" min-width="200" />
                <el-table-column prop="type_name_en" label="英文店铺类型名称" min-width="200" />
                <el-table-column prop="type_name_tw" label="繁体中文店铺类型名称" min-width="200" />
                <el-table-column prop="type_name_ja" label="日文店铺类型名称" min-width="200" />
                <el-table-column prop="type_name_th" label="泰文店铺类型名称" min-width="200" />
                <el-table-column prop="type_info" label="店铺类型要求" min-width="300" />
                <el-table-column prop="create_time" label="创建时间" min-width="150" />
                <el-table-column label="操作" min-width="280" fixed="right" align="center">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="onEdit(scope.row)">编辑</el-button>
                    <el-button type="text" size="small" @click="handleDelete(scope.row.mer_type_id, scope.$index)">删除</el-button>
                </template>
                </el-table-column>
            </el-table>
            <div class="block">
                <el-pagination
                :page-sizes="[20, 40, 60, 80]"
                :page-size="tableFrom.limit"
                :current-page="tableFrom.page"
                layout="total, sizes, prev, pager, next, jumper"
                :total="tableData.total"
                @size-change="handleSizeChange"
                @current-change="pageChange"
                />
            </div>
        </el-card>
    </div>
    <el-dialog :title="isEdit ? '编辑店铺类型' : '添加店铺类型'" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" :append-to-body='append'>
        <el-form ref="formValidate" class="formValidate mt20" :rules="ruleValidate" :model="formValidate" label-width="120px" @submit.native.prevent>
            <el-form-item label="店铺类型名称：" prop="type_name">
                <el-input v-model="formValidate.type_name" maxlength="5" placeholder="请输入店铺类型名称" />
            </el-form-item>
            <el-form-item label="英文店铺类型名称：" prop="type_name_en">
                <el-input v-model="formValidate.type_name_en" maxlength="85" placeholder="请输入店铺类型名称" />
            </el-form-item>
            <el-form-item label="繁体中文店铺类型名称：" prop="type_name_tw">
                <el-input v-model="formValidate.type_name_tw" maxlength="85" placeholder="请输入店铺类型名称" />
            </el-form-item>
            <el-form-item label="日文店铺类型名称：" prop="type_name_ja">
                <el-input v-model="formValidate.type_name_ja" maxlength="85" placeholder="请输入店铺类型名称" />
            </el-form-item>
            <el-form-item label="泰文店铺类型名称：" prop="type_name_th">
                <el-input v-model="formValidate.type_name_th" maxlength="85" placeholder="请输入店铺类型名称" />
            </el-form-item>
            <el-form-item label="店铺类型要求：">
                <el-input type="textarea" v-model="formValidate.type_info" />
            </el-form-item>
            <el-form-item style="margin-top:30px;">
                <el-button v-if="!isEdit" type="primary" class="submission" size="small" @click="handleSubmit('formValidate')">提交</el-button>
                <el-button v-else type="primary" class="submission" size="small" @click="handleUpdate('formValidate')">提交</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
  </div>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import {
  storeTypeLstApi,
  storeTypeCreateApi,
  storeTypeUpdateApi,
  storeTypeDeleteApi
} from "@/api/merchant";
import { fromList } from "@/libs/constants.js";
import { roterPre } from "@/settings";
import SettingMer from "@/libs/settingMer";
import Cookies from "js-cookie";
export default {
  name: "MerchantList",
  data() {
    return {
      fromList: fromList,
      roterPre: roterPre,
      listLoading: true,
      append: true,
      tableData: {
        data: [],
        total: 0
      },
      tableFrom: {
        page: 1,
        limit: 20
      },
      formValidate: {
        type_name: '',
        type_name_en: '',
        type_name_tw: '',
        type_name_ja: '',
        type_name_th: '',
        type_info: ''
      },
      ruleValidate: {
        type_name: [{required: true,message: "请输入店铺类型名称",trigger: "blur"} ],
        type_name_en: [{required: true,message: "请输入英文店铺类型名称",trigger: "blur"} ],
        type_name_tw: [{required: true,message: "请输入繁体中文店铺类型名称",trigger: "blur"} ],
        type_name_ja: [{required: true,message: "请输入日文店铺类型名称",trigger: "blur"} ],
        type_name_th: [{required: true,message: "请输入泰文店铺类型名称",trigger: "blur"} ]

      },
      dialogVisible: false,
      isEdit: false,
      typeId: ''
    };
  },
  mounted() {
    this.getList("");
  },
  methods: {
    // 列表
    getList(num) {
      this.listLoading = true;
      this.tableFrom.page = num ? num : this.tableFrom.page;
      storeTypeLstApi(this.tableFrom)
        .then(res => {
          this.tableData.data = res.data.list;
          this.tableData.total = res.data.count;
          this.listLoading = false;
        })
        .catch(res => {
          this.listLoading = false;
          this.$message.error(res.message);
        });
    },
    pageChange(page) {
      this.tableFrom.page = page;
      this.getList("");
    },
    handleSizeChange(val) {
      this.tableFrom.limit = val;
      this.getList(1);
    },
    handleClose() {
        this.dialogVisible = false
    },
    // 添加
    onAdd() {
      this.dialogVisible = true;
      this.isEdit = false;
      this.formValidate = {
        type_name: '',
        type_name_en: '',
        type_name_tw: '',
        type_name_ja: '',
        type_name_th: '',
        type_info: ''
      }
    },
    handleSubmit(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            storeTypeCreateApi(this.formValidate).then(async res => {
                this.$message.success(res.message)
                this.dialogVisible = false
                this.getList('')
                }).catch(res => {
                    this.$message.error(res.message)
                })
            } else {
                return false
            }
        })
    },
     // 编辑
    onEdit(row) {
      this.isEdit = true;
      this.dialogVisible = true;
      this.typeId = row.mer_type_id;
      this.formValidate = {
        type_name: row.type_name,
        type_name_en: row.type_name_en,
        type_name_tw: row.type_name_tw,
        type_name_ja: row.type_name_ja,
        type_name_th: row.type_name_th,
        type_info: row.type_info
      }
    },
    handleUpdate(name){
        this.$refs[name].validate((valid) => {
          if (valid) {
            storeTypeUpdateApi(this.typeId,this.formValidate).then(async res => {
                this.$message.success(res.message)
                this.dialogVisible = false
                this.getList('')
                }).catch(res => {
                    this.$message.error(res.message)
                })
            } else {
                return false
            }
        })
    },
    // 删除
    handleDelete(id) {
      this.$modalSure("确定删除该店铺类型吗").then(() => {
        storeTypeDeleteApi(id)
          .then(({ message }) => {
            this.$message.success(message);
            this.getList("");
          })
          .catch(({ message }) => {
            this.$message.error(message);
          });
      });
    }
  }
};
</script>

<style scoped lang="scss">
</style>
